/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import cn from "classnames";

import inputCls from "@/ui/Input/Input.module.scss";
import { Dropdown } from "@/ui/Dropdown/Dropdown";

import React from "react";
import cls from "./InputSelect.module.scss";
import { ChevronIcon } from "./icons";

type Props = {
  isOpen: boolean;
  setOpen: (v: boolean) => void;
  value?: string;
  label?: string;
  placeholder?: string;
  name?: string;
  errorText?: string;
  disabled?: boolean;
  children?: React.ReactNode;
  onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
};

export const InputSelect: React.FC<Props> = ({
  isOpen,
  setOpen,
  value,
  label,
  placeholder,
  name,
  errorText,
  disabled,
  children,
  onChange,
}) => {
  return (
    <div className={cn(cls.root, { [cls.root_open]: isOpen })}>
      {label && <span className={inputCls.label}>{label}</span>}

      <div
        className={cn(inputCls.input_wrap, { [cls.input_wrap]: !onChange })}
        onClick={() => setOpen(!isOpen)}
      >
        <input
          className={cn(inputCls.input, {
            [inputCls.input_error]: !!errorText,
          })}
          value={value}
          onChange={onChange || (() => null)}
          placeholder={placeholder}
          disabled={disabled}
          name={name}
        />

        <span className={inputCls.underline} />

        <span className={cls.arrow}>
          <ChevronIcon />
        </span>
      </div>

      <span
        className={cn(inputCls.error_wrap, {
          [inputCls.error_wrap_active]: !!errorText,
        })}
      >
        {errorText && <span className={inputCls.error}>{errorText}</span>}
      </span>

      <div className={cls.dropdown}>
        <Dropdown
          isOpen={isOpen}
          close={() => setOpen(false)}
          parentCls={cls.root}
          fullWidth
        >
          {children}
        </Dropdown>
      </div>
    </div>
  );
};
